<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="车牌" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.name" placeholder="车型" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.isBind" placeholder="请选择绑定状态">
            <el-option
              v-for="item in constants.isBind.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.used" placeholder="请选择启用状态">
            <el-option
              v-for="item in constants.carUsed.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.car_license_indate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="行驶证有效期(起)"
            end-placeholder="行驶证有效期(到)"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.compulsory_insurance_indate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="交强险有效期(起)"
            end-placeholder="交强险有效期(到)"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.commercial_insurance_indate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="商业险有效期(起)"
            end-placeholder="商业险有效期(到)"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.inspection_indate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="年检有效期(起)"
            end-placeholder="年检有效期(到)"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item v-if="iswarning && iswarning !=':iswarning'">
          <el-select value="1" :disabled="true">
            <el-option
              :key="1"
              :label="warningText"
              value="1"
            />
          </el-select>
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="used" align="center" label="启用状态" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.used" type="used" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="isBind" align="center" label="绑定状态" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.isBind" type="isBind" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="name" align="center" label="车型" width="150" />
            <el-table-column prop="no" align="center" label="车牌" width="100" />
            <el-table-column prop="loadWeight" align="center" label="载重(t)" width="80" />
            <el-table-column prop="mileage" align="center" label="行使里程(km)" width="150" />
            <el-table-column prop="carLicenseIndate" sortable align="center" label="行驶证有效期" width="150" />
            <el-table-column prop="compulsoryInsuranceIndate" sortable align="center" label="交强险有效期" width="150" />
            <el-table-column prop="commercialInsuranceIndate" sortable align="center" label="商业险有效期" width="150" />
            <el-table-column prop="inspectionIndate" sortable align="center" label="年检有效期" width="150" />
            <el-table-column prop="createTime" sortable align="center" label="创建时间" width="150" />
            <el-table-column prop="updateTime" sortable align="center" label="更新时间" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
import formatDate from '@/utils/formatDate'
export default {
  name: 'Cars',
  components: {},
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'Cars',
      formSearch: { keyword: '', used: '', car_license_indate: [], compulsory_insurance_indate: [], commercial_insurance_indate: [], inspection_indate: [] },
      self: null,
      iswarning: null,
      warningText: '车辆预警'
    }
  },
  created() {
    const iswarning = this.$route.params.iswarning
    this.iswarning = iswarning
    console.log('路由参数iswarning = ' + iswarning)
    this.init()// 页面自定义初始化
  },
  methods: {
    init() {
      var that = this
      that.loadedParams()
      that.loadData()// 加载数据(按钮+列表) 扩展需重写该方法
      this.self = that
      if (this.iswarning !== null) {
        that.search()
      }
    },
    search() {
      const queryList = []
      this.loadedParams()
      if (!String.isNullOrEmpty(this.formSearch.keyword)) queryList.push({ 'key': 'no', 'value': this.formSearch.keyword, 'oper': ':', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.name)) queryList.push({ 'key': 'name', 'value': this.formSearch.name, 'oper': ':', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.used) && this.formSearch.used !== 'All') queryList.push({ 'key': 'used', 'value': this.formSearch.used, 'oper': '=', 'join': 'and' })
      if (!String.isNullOrEmpty(this.formSearch.isBind) && this.formSearch.isBind !== 'All') queryList.push({ 'key': 'isBind', 'value': this.formSearch.isBind, 'oper': '=', 'join': 'and' })
      // if (this.iswarning) { // 车辆预警
      //   queryList.push({ 'key': 'carLicenseIndate', value: this.formSearch.car_license_indate, 'oper': '<', 'join': 'or' })
      //   queryList.push({ 'key': 'compulsoryInsuranceIndate', value: this.formSearch.compulsory_insurance_indate, 'oper': '<', 'join': 'or' })
      //   queryList.push({ 'key': 'commercialInsuranceIndate', value: this.formSearch.commercial_insurance_indate, 'oper': '<', 'join': 'or' })
      //   queryList.push({ 'key': 'inspectionIndate', value: this.formSearch.inspection_indate, 'oper': '<', 'join': 'or' })
      // }
      if (!String.isNullOrEmpty(this.formSearch.car_license_indate)) {
        queryList.push({ 'key': 'o.carLicenseIndate', 'value': this.formSearch.car_license_indate[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.carLicenseIndate', 'value': this.formSearch.car_license_indate[1], 'oper': '<=', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.compulsory_insurance_indate)) {
        queryList.push({ 'key': 'o.compulsoryInsuranceIndate', 'value': this.formSearch.compulsory_insurance_indate[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.compulsoryInsuranceIndate', 'value': this.formSearch.compulsory_insurance_indate[1], 'oper': '<=', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.commercial_insurance_indate)) {
        queryList.push({ 'key': 'o.commercialInsuranceIndate', 'value': this.formSearch.commercial_insurance_indate[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.commercialInsuranceIndate', 'value': this.formSearch.commercial_insurance_indate[1], 'oper': '<=', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.inspection_indate)) {
        queryList.push({ 'key': 'o.inspectionIndate', 'value': this.formSearch.inspection_indate[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.inspectionIndate', 'value': this.formSearch.inspection_indate[1], 'oper': '<=', 'join': 'and' })
      }
      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', locked: '', car_license_indate: '', compulsory_insurance_indate: '', commercial_insurance_indate: '', inspection_indate: '' }
    },
    // 加载路由参数
    loadedParams() {
      var iswarning = this.iswarning
      if (parseInt(iswarning) === 1) { // 行驶证预警
        this.formSearch.car_license_indate = ['', formatDate.getDay(90)]
        this.warningText = '行驶证预警'
        // this.search()
      } else if (parseInt(iswarning) === 2) { // 交强险预警
        this.formSearch.compulsory_insurance_indate = ['', formatDate.getDay(90)]
        this.warningText = '交强险预警'
        // this.search()
      } else if (parseInt(iswarning) === 3) { // 商业险预警
        this.formSearch.commercial_insurance_indate = ['', formatDate.getDay(90)]
        this.warningText = '商业险预警'
        // this.search()
      } else if (parseInt(iswarning) === 4) { // 年检预警
        this.formSearch.inspection_indate = ['', formatDate.getDay(90)]
        this.warningText = '年检预警'
        // this.search()
      }
    }
  }
}
</script>
